<template>
  <view class="root">
    <view class="content">
      <uni-forms ref="form" label-position="top" :model="form" validateTrigger="blur" :border="false"
        err-show-type="toast" label-width="130px">
        <view class="content-inner-wrapper identity-form-wrapper">
          <view class="form-item-bg">
            <uni-forms-item label="问题类型" name="nationality" required>
              <view class="form-content-wrapper">
                <view class="checked-item" :class="form.problemType == 1 ? 'checked-item-active' : ''"
                  @click="handleCheckedItem(1)">
                  <view class="top-text">
                    功能异常
                  </view>
                  <view class="info-text">
                    内容报错、卡顿、错位等
                  </view>
                </view>
                <view class="checked-item" :class="form.problemType == 2 ? 'checked-item-active' : ''"
                  @click="handleCheckedItem(2)">
                  <view class="top-text">
                    产品改进
                  </view>
                  <view class="info-text">
                    反馈产品及服务优化建议
                  </view>
                </view>
              </view>
            </uni-forms-item>
          </view>
          <view class="form-item-bg">
            <uni-forms-item label="反馈描述" name="idType" required>
              <u-textarea height="280rpx" class="slot-content" v-model="form.content"
                :placeholderStyle="placeholderStyle" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助。" :maxlength="300" count
                ref="textareaRef" :formatter="formatter" :border="false"></u-textarea>
            </uni-forms-item>
          </view>
          <view class="form-item-bg">
            <uni-forms-item label="人脸照片" name="fFaceUrl">
              <div slot="label" class="label-text">图片凭证<text class="info-text-label">（不超过4张图片）</text></div>
            </uni-forms-item>
            <u-upload :fileList="form.pathList" @afterRead="(info) => afterReadFive(info, 'form', 90)"
              @delete="(info) => deletePhoto(info, 'form')" name="pathList" :maxCount="4" :multiple="true" width="96"
              height="80">
              <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
            </u-upload>
          </view>
          <view class="form-item-bg">
            <uni-forms-item label="联系方式" name="mobile">
              <view class="form-content-item" :class="form.mobile ? '' : 'input-item'">
                <uni-easyinput type="number" :maxlength="11" v-model="form.mobile" :inputBorder="false"
                  placeholder="请输入您的手机号" :clearable="true" />
              </view>
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="button-wrapper">
      <view class="cancel btn-item" @click="handleCancel">取消</view>
      <u-button class="custom-style" text="保存" @click="handleSubmit" :disabled="loading"
        :custom-style="customSubmitStyleHalf"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    addPersonInfo,
    feedbackAdd,
    getIdPersonInfo,
    selectHeadBybm,
    updatePersonInfo,
  } from "../api/api";
  import {
    postAction
  } from "../utils/request";
  import {
    findCompany,
    infoDetailSave
  } from "@/api/home";
  import moment from "@/utils/moment";
  import pickerMixin from "@/utils/picker-mixin";
  import _ from "@/utils/lodash.js";
  import uploadFileMixin from "../utils/upload-file-mixin";

  import {
    Toast,
    customSubmitStyleHalf,
    navBack,
    placeholderStyle
  } from "@/utils/util";

  export default {
    mixins: [pickerMixin, uploadFileMixin],
    data() {
      return {
        form: this.initForm(),
        baseImgUrl: this.$baseImgUrl,
        customSubmitStyleHalf,
        placeholderStyle,
        textareaRef: null,
        actived: 0,
        loading: false
      };
    },
    watch: {},
    // 定义 actionType 'add' 'modify'
    // 其他参数放在 params 里面
    onLoad(options) {},
    onReady() {
      this.$refs.textareaRef.setFormatter(this.formatter)
    },
    methods: {
      moment,
      initForm() {
        return {
          problemType: '1',
          content: '',
          mobile: '',
          pathList: []
        };
      },
      formatter(value) {
        if (value.length >= 300) {
          return value.substr(0, 300)
        } else {
          return value
        }
      },
      handleCheckedItem(index) {
        this.form.problemType = index
      },
      handleSubmit() {
        const {
          problemType,
          content,
          mobile,
          pathList
        } = this.form
        if (!problemType) {
          Toast('请选择问题类型！')
          return
        }
        if (!content) {
          Toast('请填写反馈描述！')
          return
        }
        if (mobile && !this.$u.test.mobile(mobile)) {
          Toast('请输入正确的手机号！')
          return
        }
        const params = {
          ...this.form,
          pathList: this.form.pathList.length ? this.form.pathList.map(item => item.halfPath) : []
        }
        this.loading = true
        feedbackAdd(params)
          .then((res) => {
            Toast('操作成功！')
            setTimeout(() => {
              navBack()
              uni.$emit('add-feedback')
            }, 500)
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
  };
</script>

<style>
  page {
    background: #f9f9f9;
    box-sizing: border-box;
  }
</style>

<style lang="scss" scoped>
  @import "../styles/uni-form-label-top.scss";

  .root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .content {
      flex: 1;
      height: 0;
      overflow: auto;

      .content-inner-wrapper {
        .form-item-bg {
          background: #FFFFFF;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          padding-left: 30rpx;
          padding-bottom: 40rpx;
          margin-bottom: 10rpx;
          padding-right: 20rpx;
          padding-top: 30rpx;

          /deep/ .uni-forms-item__label {
            font-weight: bold !important;
            font-size: 32rpx !important;
            color: #181818 !important;
          }

          /deep/ .label-text {
            font-weight: bold;
            font-size: 32rpx;
            color: #181818;
          }

          /deep/ .info-text-label {
            font-weight: 400;
            font-size: 30rpx;
            color: #A9A9A9;
          }
        }

        .u-textarea {}
      }
    }

    /deep/.uni-forms {}

    .form-content-item {}

    .form-content-wrapper {
      display: flex;
      gap: 24rpx;

      .checked-item {
        background: #F7F7F7;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 1rpx solid #F7F7F7;
        padding: 20rpx 15rpx 31rpx 15rpx;
        flex: 1;

        .top-text {
          font-weight: bold;
          font-size: 30rpx;
          color: #181818;
          text-align: center;
        }

        .info-text {
          font-weight: 500;
          font-size: 24rpx;
          color: #181818;
          margin-top: 10rpx;
          text-align: center;
        }
      }

      .checked-item-active {
        background: #EFF7FF;
        border: 1rpx solid #D1E7FC;
      }
    }
  }
</style>